<!--
 * @Date: 2024-09-11 19:41:17
 * @Author: Yu Weifeng weifeng.yu@gientech.com
 * @Description: 折线图
-->
<template>
  <ChartBase :options="chartOptions" :currentEcharts="echarts" class="lc-chart__brokenline" />
</template>
<script setup>
import { chartProps } from '../base.ts';
import { computed } from 'vue';
import ChartBase from '../base.vue';
/******* echarts *********/
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  DatasetComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { isEmpty, isObject } from 'lodash-es';

echarts.use([
  TitleComponent,
  DatasetComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

defineOptions({
  name: 'LcChartBrokenLine'
});
const props = defineProps(chartProps);

const processData = (data, mapOptions) => {
  let transformData = [];
  // 设置了映射字段 或者 数据里有name和value字段
  if (!isEmpty(mapOptions) || (isObject(data[0]) && data[0]['name'] && data[0]['value'])) {
    if ((mapOptions && mapOptions.type) || data[0]['type']) {
      const groupData = {};
      const dimensionGroup = {};
      data.forEach((item) => {
        //分组
        const groupType = item[mapOptions?.type || 'type'];
        groupData[groupType] = groupData[groupType] ?? [];
        groupData[groupType].push(item);
        // x轴
        const dimensionGroupType = item[mapOptions?.dimension || 'name'];
        dimensionGroup[dimensionGroupType] = dimensionGroup[dimensionGroupType] ?? [];
        dimensionGroup[dimensionGroupType].push(item);
      });

      const groupKeys = Object.keys(groupData);
      transformData.push(['brokenLine', ...Object.keys(groupData)]);
      Object.keys(dimensionGroup).forEach((dimension) => {
        let dimensionDataArray = new Array(groupKeys.length);
        dimensionGroup[dimension].forEach((item) => {
          dimensionDataArray[groupKeys.indexOf(item[mapOptions?.type || 'type'])] =
            item[mapOptions?.valueMap || 'value'];
        });
        transformData.push([dimension, ...dimensionDataArray]);
      });
    } else {
      transformData.push(['brokenLine', '']);
      Array.isArray(data) &&
        data.forEach((item) => {
          transformData.push([
            item[mapOptions?.dimension || 'name'],
            item[mapOptions?.valueMap || 'value']
          ]);
        });
    }
  } else {
    // echarts dataset格式也是可以解析的
    transformData = data;
  }

  return transformData;
};
const chartOptions = computed(() => {
  const options = props.options;
  const processedData = processData(props.data, props.mapOptions);
  if (processedData.length > 0) {
    const series =
      processedData[0].length < 3
        ? [options.series[0]]
        : processedData[0].length > options.series.length
          ? options.series.concat(
              new Array(processedData[0].length - options.series.length - 1).fill(options.series[0])
            )
          : options.series.slice(0, processedData[0].length);
    // 没有分组信息时，不需要显示legend
    series.length < 2 && delete options.legend;
    options.series = series;
    return Object.assign({}, options, {
      dataset: {
        source: processedData
      }
    });
  } else {
    return options;
  }
});
</script>
